<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义菜单</title>
    <style>
        #ul li {
            list-style: none;
        }
        #ul {
            width: 100px;
            padding: 10px 10px;
            border: 1px solid #999;
            border-radius: 8px;
            position: absolute;
        }
        #li_line {
            text-decoration: underline;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <ul hidden id="ul">
        <li>返回</li>
        <li>刷新</li>
        <li>检查</li>
        <li id="li_line">查看源代码</li>
        <li>翻译</li>
    </ul>
    <script>
        document.oncontextmenu = function() {
            // 显示自定义菜单，隐藏预定义菜单，所以需要阻止默认事件
            event.preventDefault();
            ul.style.display = 'block';
            ul.style.top = event.clientY + 'px';
            ul.style.left = event.clientX + 'px';
        }
        // 点击空白，隐藏菜单
        document.onclick = function() {
            ul.style.display = 'none';
        }
    </script>
</body>
</html>